<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <h1>显示当前的数字是{{$store.state.count}}</h1>
        <add-number></add-number>
        <reduce-number></reduce-number>
    </div>
    <script src="./vue.js"></script>
    <script src="./vuex.js"></script>
    <script>
        console.log(Vuex);
        // 创建一个addNumber组件
        Vue.component('add-number',{
            template:`
                <div>
                    当前的数字是{{$store.state.count}}
                    <button @click="add">加一</button>  
                </div>
            `,
            methods:{
                add(){ // 如何拿到父组件的counter
                    this.$store.commit('sum')
                }
            }
        })

        Vue.component('reduce-number',{
            template:`
                <div>
                    当前的数字是{{$store.state.count}}
                    <button @click="reduce">减一</button> 
                </div> 
            `,
            methods:{
                reduce(){
                    this.$store.commit('reduce');
                }
            }
        })


        const store = new Vuex.Store({
            state:{  //维护的是共享的数据,类似于实例中的data
                count:0
            },
            mutations:{ //放的是操作state中数据的方法，每个方法会接受到state这个对象
                sum(state){
                    state.count++
                },
                reduce(state){
                    state.count--
                }
            }
        })

        let vm = new Vue({
            el:'#app',
            store  //把store实例注入到vue实例中，可以让他的所有的子组件都使用该store
        })
    </script>
</body>
</html>